<!DOCTYPE html>
<html>

<head>
    <style>
        #carousel {
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        #carousel img {
            width: 400px;
            height: 300px;
            display: none;
        }

        #carousel img.active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="carousel">
        <img src="img/图4.jpg" class="active">
        <img src="img/图2.jpg">
        <img src="img/图3.jpg">
    </div>

    <script>
        let images = document.querySelectorAll('#carousel img');
        let currentImage = 0;

        setInterval(() => {
            images[currentImage].classList.remove('active');
            currentImage = (currentImage + 1) % images.length;
            images[currentImage].classList.add('active');
        }, 3000);
    </script>
</body>

</html>